<style scoped>
  .chart-box-demo {
    background: #020c30;
    width: 100%;
    height: 100%;
    color: #fff;
    min-width: 1750px;
    min-height: 960px;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 15px;
    background-image: url('../assets/images/bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
  }

  .header-box {
    color: #fdfefe;
    width: 1245px;
    margin: 0 auto;
  }

  .header-box .title {
    padding: 30px 0 0 0;
    font-size: 26px;
  }

  .data-box {
    display: inline-block;
    position: relative;
    min-width: 120px;
    height: 40px;
    text-align: center;
    padding: 0 15px;
    line-height: 40px;

    color: white;
    z-index: 1;
    margin-right: 20px;
    /*background-image: url("../assets/images/wz_01.png");*/
    /*background-repeat: no-repeat;*/
    /*background-size: 100% 100%;*/
  }

  .data-box:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("../assets/images/wz_02.png");
    background-repeat: repeat-x;
    background-size: 100% 100%;
    transform: skewX(-45deg);
    z-index: -1;
    /*background: -webkit-radial-gradient(#194a8c, #2c84b1, #2c84b1); !* Safari 5.1 - 6.0 *!*/
    /*background: -o-radial-gradient(#194a8c, #2c84b1, #2c84b1); !* Opera 11.6 - 12.0 *!*/
    /*background: -moz-radial-gradient(#194a8c, #2c84b1, #2c84b1); !* Firefox 3.6 - 15 *!*/
    /*background: radial-gradient(#194a8c, #2c84b1, #2c84b1); !* 标准的语法 *!*/
    /*background: -webkit-linear-gradient(180deg, #194a8c, #2c84b1); !* Safari 5.1 - 6.0 *!*/
    /*background: -o-linear-gradient(180deg, #194a8c, #2c84b1); !* Opera 11.1 - 12.0 *!*/
    /*background: -moz-radial-gradient(180deg,#194a8c, #2c84b1); !* Firefox 3.6 - 15 *!*/
    /*background: radial-gradient(180deg, #194a8c, #2c84b1); !* 标准的语法（必须放在最后） *!*/
    /*background-color: linear-gradient(#76d0fa,#528dfa);*/

  }

  .left-chart-box1 {
    width: 544px;
    height: 376px;
    background-image: url("../assets/images/bg_06.png");
    background-repeat: no-repeat;
    color: #fff;
  }

  .right-chart-box1 {
    width: 544px;
    height: 376px;
    background-image: url("../assets/images/bg_06.png");
    background-repeat: no-repeat;
  }

  .left-chart-box2 {
    width: 544px;
    height: 376px;
    background-image: url("../assets/images/bg_06.png");
    background-repeat: no-repeat;
  }

  .center-box {
    min-width: 574px;
    height: 376px;
    background-image: url("../assets/images/bg_07.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 80px 15px;
    box-sizing: border-box;
  }

  .right-chart-box2 {
    width: 544px;
    height: 376px;
    background-image: url("../assets/images/bg_06.png");
    background-repeat: no-repeat;
  }

  .chart-content-box .title {
    color: #fff;
    text-align: left;
    font-size: 24px;
    padding-left: 92px;
    letter-spacing: 2px;
    height: 24px;
    line-height: 24px;
  }

  .left-chart-box1 .number-box {
    margin-top: 70px;
    padding-left: 92px;
    text-align: left;
  }

  .left-chart-box1 .number-box p {
    padding-left: 10px;
    font-size: 14px;
    height: 15px;
    display: inline-block;
    width: 100%;
    border-left: 4px solid #fff;
    line-height: 15px;
  }

  .data-number {
    padding: 20px 0;
  }

  .data-number span {
    width: 36px;
    height: 38px;
    display: inline-block;
    background: #DFE867;
    margin-right: 8px;
    text-align: center;
    color: #213166;
    line-height: 44px;
    font-size: 25px;
  }

  .fwl-box .data-number span {
    background: #E16766;
    color: #FBFCFE;
  }

  #myChart, #myChart4 {
    width: 100%;
    height: 100%;
  }

  #myChart2, #myChart3, #myChart5 {
    width: 100%;
    height: calc(100% - 24px);
  }
</style>
<template>
  <div class="chart-box-demo">
    <div class="header-box">
      <div class="title"> 我是来当title的哦</div>
      <div class="top-box">
        <img src="../assets/images/top_01.png" alt="">
      </div>
      <div>
        <span class="data-box">hehehhe：444444444111</span>
        <span class="data-box">hehehhe：444444444111</span>
        <span class="data-box">hehehhe：444444444111</span>
        <span class="data-box">hehehhe：444444444111</span>
        <span class="data-box">hehehhe：444444444111</span>
      </div>

    </div>
    <div class="chart-content-box ">
      <div class="display-flex mt20">
        <div class="left-chart-box1">
          <div class="title">我是标题哦</div>
          <div class="number-box">
            <div class="sjl-box">
              <p>数据量</p>
              <div class="data-number">
                <span v-for="i in 8" :key="i">{{i}}</span>
              </div>
            </div>
            <div class="fwl-box mt10">
              <p>数据量</p>
              <div class="data-number">
                <span v-for="i in 8" :key="i">{{i}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 plr10">
          <div id="myChart"></div>
        </div>
        <div class="right-chart-box1">
          <div class="title">我是标题哦</div>
          <div id="myChart2"></div>
        </div>
      </div>
      <div class="display-flex mt20">
        <div class="left-chart-box2">
          <div class="title">我是标题哦</div>
          <div id="myChart3"></div>
        </div>
        <div class="flex-1 plr10">
          <div class="center-box">
            <div id="myChart4"></div>
          </div>
        </div>
        <div class="right-chart-box2">
          <div class="title">我是标题哦</div>
          <div id="myChart5"></div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'

  export default {
    components: {},
    data() {
      return {
        option1: {
          title: {},
          tooltip: {},
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [
            {
              type: 'graph',
              layout: 'none',
              symbolSize: 15,
              roam: true,
              itemStyle: {
                shadowColor: 'rgba(255, 255, 255)',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 10,
                borderColor: 'rgba(255, 255, 255,0.7)',
                borderWidth: 1,
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [{
                    offset: 0, color: '#14D1B0' // 0% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                }
              },
              label: {
                normal: {
                  show: true,
                  offset: [40, -20]
                }
              },
              edgeSymbol: ['circle', 'arrow'],
              edgeSymbolSize: [4, 10],
              edgeLabel: {
                normal: {
                  textStyle: {
                    fontSize: 20
                  }
                }
              },
              data: [
                {
                  name: '国家气象局',
                  x: 0,
                  y: 50
                },
                {
                  name: '勘测站',
                  x: 0,
                  y: 200
                },
                {
                  name: '卫星数据',
                  x: 0,
                  y: 350
                },
                {
                  name: '雷达数据',
                  x: 0,
                  y: 500
                },
                {
                  name: '处理中心',
                  x: 250,
                  y: 300
                },

                {
                  name: '同步',
                  x: 400,
                  y: 300
                },
                {
                  name: '入库',
                  x: 350,
                  y: 480
                },

                {
                  name: '传输',
                  x: 500,
                  y: 90,
                  itemStyle: {
                    color: {
                      type: 'radial',
                      x: 0.5,
                      y: 0.5,
                      r: 0.5,
                      colorStops: [{
                        offset: 0, color: '#DB0D52' // 0% 处的颜色
                      }],
                      globalCoord: true // 缺省为 false
                    }
                  }
                },


                {
                  name: 'DRDS',
                  x: 550,
                  y: 300
                },

                {
                  name: 'OTS',
                  x: 600,
                  y: 500
                },

                {
                  name: 'OSS',
                  x: 800,
                  y: 60
                },


                {
                  name: '管理',
                  x: 700,
                  y: 180
                },

                {
                  name: '统一接口',
                  x: 800,
                  y: 350
                },
              ],
              // links: [],
              links: [
                {
                  source: '国家气象局',
                  target: '处理中心',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                }, {
                  source: '勘测站',
                  target: '处理中心',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                }, {
                  source: '卫星数据',
                  target: '处理中心',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },
                {
                  source: '雷达数据',
                  target: '处理中心',
                  lineStyle: {
                    normal: {curveness: -0.2}
                  }
                },

                {
                  source: '处理中心',
                  target: '同步',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },

                {
                  source: '处理中心',
                  target: '入库',
                  lineStyle: {
                    normal: {curveness: -0.2}
                  }
                },
                {
                  source: '入库',
                  target: 'DRDS',
                  lineStyle: {
                    normal: {curveness: -0.2}
                  }
                },
                {
                  source: '处理中心',
                  target: '传输',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },

                {
                  source: '传输',
                  target: 'OSS',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },
                {
                  source: '传输',
                  target: '管理',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },
                {
                  source: '管理',
                  target: 'OSS',
                  lineStyle: {
                    normal: {curveness: -0.2}
                  }
                },
                {
                  source: 'DRDS',
                  target: '统一接口',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },
                {
                  source: 'DRDS',
                  target: '管理',
                  lineStyle: {
                    normal: {curveness: -0.2}
                  }
                },
                {
                  source: '同步',
                  target: 'DRDS',
                  lineStyle: {
                    normal: {curveness: 0.2}
                  }
                },
                {
                  source: 'OTS',
                  target: '统一接口',
                  lineStyle: {
                    normal: {curveness: -0.2}
                  }
                },

              ],
              lineStyle: {
                normal: {
                  color: '#fe925d',
                  opacity: 0.9,
                  width: 2,
                  type: 'dashed',
                  curveness: 0,
                }
              }
            }
          ]
        },
        option2: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            right: '20',
            top: '20',
            textStyle: {
              color: '#fff',
            },
            data: ['雷达', '海洋', '卫星', '大气成分', '地面', '灾害', '辐射', '高空'],
          },
          calculable: false,
          series: [
            {
              name: '面积模式',
              type: 'pie',
              radius: [30, 110],
              center: ['45%', '50%'],
              roseType: 'area',
              data: [
                {
                  value: 10, name: '雷达', itemStyle: {
                  color: '#8779ed',
                },
                },
                {
                  value: 5, name: '海洋',
                  itemStyle: {
                    color: '#f6bdf4',
                  },
                },
                {
                  value: 15, name: '卫星',
                  itemStyle: {
                    color: '#ff7295',
                  },
                },
                {
                  value: 25, name: '大气成分',
                  itemStyle: {
                    color: '#ff8560',
                  },
                },
                {
                  value: 20, name: '地面',
                  itemStyle: {
                    color: '#ffc81c',
                  },
                },
                {
                  value: 35, name: '灾害',
                  itemStyle: {
                    color: '#00d3af',
                  },
                },
                {
                  value: 30, name: '辐射',
                  itemStyle: {
                    color: '#00c6e8',
                  },
                },
                {
                  value: 40, name: '高空',
                  itemStyle: {
                    color: '#0097f2',
                  },
                }
              ]
            }
          ]
        },
        option3: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },

          legend: {
            orient: 'vertical',
            right: '20',
            top: '20',
            textStyle: {
              color: '#fff',
            },
            data: ['直接访问']
          },

          series: [
            {
              type: 'pie',
              legendHoverLink: false,
              hoverAnimation: false,
              center: ['30%', '45%'],
              radius: [75, 90],
              startAngle: 180,
              clockwise: true,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              lableLine: {
                normal: {
                  show: false,

                },
                emphasis: {
                  show: true
                }
              },
              data: [
                {
                  name: 'other',
                  value: 40,
                  itemStyle: {
                    color: '#D2D4D8'
                  },
                },
                {
                  name: 'GoogleMaps',
                  value: 60,
                  itemStyle: {
                    color: '#14D1B0'
                  },
                  label: {
                    normal: {
                      show: true,
                      color: '#fff',
                      position: 'center',
                      formatter: function (params) {
                        let num = (params.value + '%');
                        return params.data.name + '\n\n' + num
                      },
                      textStyle: {
                        baseline: 'top'
                      }
                    },
                    emphasis: {
                      show: true
                    }
                  },

                }
              ]
            },
            {
              type: 'pie',
              legendHoverLink: false,
              hoverAnimation: false,
              center: ['72%', '32%'],
              radius: [55, 60],
              startAngle: 180,
              clockwise: true,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              lableLine: {
                normal: {
                  show: false,

                },
                emphasis: {
                  show: true
                }
              },
              data: [
                {
                  name: 'other',
                  value: 40,
                  itemStyle: {
                    color: '#76D0FA'
                  },
                },
                {
                  name: 'GoogleMaps',
                  value: 60,
                  itemStyle: {
                    color: '#90FFFB'
                  },
                  label: {
                    normal: {
                      show: true,
                      color: '#86EDFD',
                      position: 'center',
                      formatter: function (params) {
                        let num = (params.value + '%');
                        return params.data.name + '\n\n' + num
                      },
                      textStyle: {
                        baseline: 'top'
                      }
                    },
                    emphasis: {
                      show: true
                    }
                  },

                }
              ]
            },
            {
              type: 'pie',
              legendHoverLink: false,
              hoverAnimation: false,
              center: ['72%', '71%'],
              radius: [55, 60],
              startAngle: 180,
              clockwise: true,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              lableLine: {
                normal: {
                  show: false,

                },
                emphasis: {
                  show: true
                }
              },
              data: [
                {
                  name: 'other',
                  value: 40,
                  itemStyle: {
                    color: '#E7BCF3'
                  },
                },
                {
                  name: 'GoogleMaps',
                  value: 60,
                  itemStyle: {
                    color: '#76D0FA'
                  },
                  label: {
                    normal: {
                      show: true,
                      color: '#86EDFD',
                      position: 'center',
                      formatter: function (params) {
                        let num = (params.value + '%');
                        return params.data.name + '\n\n' + num
                      },
                      textStyle: {
                        baseline: 'top'
                      }
                    },
                    emphasis: {
                      show: true
                    }
                  },

                }
              ]
            },

          ]
        },
        option4: {
          xAxis: {
            axisLabel: {
              show: true,
              color: '#FDFEFF',
              fontSize: 15, formatter: function (data) {
                return data ? data + ':00' : ''
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#BFCBDC',
              }
            },
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisPointer: {
              show: true
            },
            min: 0,
            max: 9,
            splitNumber: 9,
          },
          yAxis: {
            axisTick: {
              show: true,
              boundaryGap: [0, '100%'],
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#BFCBDC',
              }
            },
            axisLabel: {
              show: true,
              color: '#FDFEFF',
              fontSize: 15,
            },


          },
          series: [
            {
              type: 'line',
              itemStyle: {
                color: '#76D0FA',
              },
              data: [
                [0.56, 88],
                [1.7, 92],
                [3.15, 89],
                [3.94, 92],
                [5.45, 90],
                [6.89, 95],
                [7.5, 96],
                [8.1, 90],
                [8.94, 88],
              ]
            },
            {
              type: 'line',
              itemStyle: {
                color: '#DFC239',
              },
              data: [
                [0.56, 86],
                [1.7, 87],
                [3.15, 86],
                [3.94, 88],
                [5.45, 82],
                [6.89, 95],
                [7.5, 88],
                [8.1, 81],
                [8.94, 81],
              ]

            },
            {
              type: 'line',
              data: [86, 87, 86, 88, 82, 95, 88, 86, 88]
            }
          ]
        },
        option5: {
          tooltip: {
            trigger: 'item',
            formatter:
              "{a} <br/>{b}: {c} ({d}%)"
          }
          ,
          legend: {
            orient: 'vertical',
            right:
              '20',
            top:
              '20',
            textStyle:
              {
                color: '#fff',
              }
            ,
            data: ['监控气象', '旅游气象', '天气雷达组合折射率',]
          }
          ,
          series: [
            {
              type: 'pie',
              legendHoverLink: false,
              hoverAnimation: false,
              center: ['48%', '48%'],
              radius: [90, 110],
              startAngle: 180,
              clockwise: true,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              lableLine: {
                normal: {
                  show: false,

                },
                emphasis: {
                  show: true
                }
              },
              data: [
                {
                  name: '监控气象',
                  value: 16,
                  itemStyle: {
                    color: '#178dd5'
                  },
                  label: {
                    normal: {
                      show: true,
                      color: '#86EDFD',
                      position: 'outside',
                      verticalAlign: 'middle',
                      fontSize: 28,
                      formatter: function (params) {
                        return params.value
                      },
                      textStyle: {
                        baseline: 'top'
                      }
                    },
                    emphasis: {
                      show: true
                    }
                  },
                },
                {
                  name: '旅游气象',
                  value: 18,
                  itemStyle: {
                    color: '#28b79b'
                  }, label: {
                  normal: {
                    show: true,
                    color: '#86EDFD',
                    position: 'outside',
                    verticalAlign: 'middle',
                    fontSize: 28,
                    formatter: function (params) {
                      return params.value
                    },
                    textStyle: {
                      baseline: 'top'
                    }
                  },
                  emphasis: {
                    show: true
                  }
                },
                },
                {
                  name: '天气雷达组合折射率',
                  value: 18,
                  itemStyle: {
                    color: '#bf4588'
                  }, label: {
                  normal: {
                    show: true,
                    color: '#86EDFD',
                    position: 'outside',
                    verticalAlign: 'middle',
                    fontSize: 28,
                    formatter: function (params) {
                      return params.value
                    },
                    textStyle: {
                      baseline: 'top'
                    }
                  },
                  emphasis: {
                    show: true
                  }
                },
                },

              ]
            },

          ]
        }
        ,
      }
    },
    mounted: function () {
      this.getChart();
     let time1= moment.duration('03:32').hours();

       console.log(time1,"=time1")



    },
    methods: {
      getChart: function () {
        let chart1 = this.$echarts.init(document.getElementById('myChart'));
        chart1.setOption(this.option1);

        let chart2 = this.$echarts.init(document.getElementById('myChart2'));
        chart2.setOption(this.option2);

        let chart3 = this.$echarts.init(document.getElementById('myChart3'));
        chart3.setOption(this.option3);

        let chart4 = this.$echarts.init(document.getElementById('myChart4'));
        chart4.setOption(this.option4);

        let chart5 = this.$echarts.init(document.getElementById('myChart5'));
        chart5.setOption(this.option5);


        window.onresize = function () {
          chart1.resize();
          chart2.resize();
          chart3.resize();
          chart5.resize();
        }
      },
    }
  }
</script>
